<script lang="ts" setup>
import { computed, ref, watch } from 'vue';

import { MdiQuestion } from '@vben/icons';
import { preferences, usePreferences } from '@vben/preferences';

import {
  Button,
  Cascader,
  Checkbox,
  Col,
  message,
  Modal,
  Popover,
  Row,
  Select,
} from 'ant-design-vue';

import { updateImage } from '#/api';

interface CategoryList {
  id: number;
  name: string;
  num: number;
  categoryTowListResp: { id: number; name: string }[];
}

const props = defineProps({
  categoryList: {
    type: Array as () => CategoryList[],
    default: () => [],
  },
  info: {
    type: Object,
    default: () => ({}),
  },
  imageEdit: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['close', 'update:info']);

const data = computed({
  get() {
    return props.info;
  },
  set(newValue) {
    emit('update:info', newValue);
  },
});

// 使用 usePreferences 函数获取主题相关信息
const { isDark } = usePreferences();

// 计算当前主题
const theme = computed(() => {
  if (preferences.theme.mode === 'auto') {
    return isDark.value ? 'dark' : 'light';
  }
  return preferences.theme.mode;
});

// 分类信息
const category = ref<string[]>([]);

// 设置一个监听，当info有值的时候 把一级分类和二级分类id传给category
watch(
  () => props.info,
  (newValue) => {
    if (newValue) {
      category.value = [newValue.oneCategoryId, newValue.twoCategoryId];
    }
  },
  { immediate: true },
);

// 标签数据
const tagValue = ref<number | string | undefined>();
const options = ref([
  {
    value: 1,
    label: '一张床',
  },
  {
    value: 2,
    label: '二张床',
  },
  {
    value: 3,
    label: '三张床',
  },
]);

const close = () => {
  emit('close');
};

// 确认编辑事件
const handleSubmit = async () => {
  try {
    await updateImage(data.value);
    close();
    message.success('操作成功');
  } catch (error) {
    console.error('编辑图片失败：', error);
  }
};
</script>

<template>
  <Modal :open="imageEdit" width="1280px" @cancel="close">
    <template #title>
      <div
        :class="[theme === 'dark' ? 'text-white' : 'text-black']"
        class="text-xl font-bold"
      >
        编辑图片
      </div>
    </template>
    <div class="max-h-[64vh] overflow-y-auto">
      <Row :wrap="true" class="mt-5">
        <Col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
          <div
            class="mb-5 rounded-md border border-dashed border-gray-300 bg-gray-100"
          >
            <div class="flex items-center justify-end px-3 py-2 text-gray-900">
              {{ info.categoryName || '图片' }}
            </div>
            <div
              :style="{ backgroundImage: `url(${info.imageUrl})` }"
              class="flex h-[25rem] items-center justify-center bg-contain bg-center bg-no-repeat"
            ></div>
          </div>
        </Col>
        <Col flex="1">
          <div class="mb-5 px-4">
            <div class="flex items-center">
              <Checkbox v-model:checked="data.isRecommend">
                <div
                  :class="[
                    theme === 'dark' ? 'text-gray-200' : 'text-gray-800',
                  ]"
                >
                  设为精选图片
                </div>
              </Checkbox>
              <Popover
                content="图片将作为精选图片展示在小程序首页轮播上"
                placement="bottom"
              >
                <div class="cursor-pointer">
                  <MdiQuestion class="text-lg" />
                </div>
              </Popover>
            </div>
            <!-- 如果不是房型类型的 则不能设置 -->
            <div v-if="info.oneCategoryId === 1" class="mt-3 flex items-center">
              <Checkbox v-model:checked="data.isRoomTypeCover">
                <div
                  :class="[
                    theme === 'dark' ? 'text-gray-200' : 'text-gray-800',
                  ]"
                >
                  设为房型首图
                </div>
              </Checkbox>
              <Popover
                content="图片将作为房型首图展示在房型列表上"
                placement="bottom"
              >
                <div class="cursor-pointer">
                  <MdiQuestion class="text-lg" />
                </div>
              </Popover>
            </div>
            <div
              :class="[theme === 'dark' ? 'text-gray-200' : 'text-gray-800']"
              class="mb-1.5 mt-5"
            >
              分类<span class="ml-1 text-red-500">*</span>
            </div>
            <Cascader
              v-model:value="category"
              :allow-clear="false"
              :field-names="{
                label: 'name',
                value: 'id',
                children: 'categoryTowListResp',
              }"
              :options="categoryList"
              class="mr-3 text-sm"
              expand-trigger="hover"
              placeholder="设置图片的目标分类"
              style="width: 100%"
            />
            <div
              v-if="false"
              :class="[theme === 'dark' ? 'text-gray-200' : 'text-gray-800']"
              class="mb-1.5 mt-5"
            >
              标签
            </div>
            <Select
              v-if="false"
              v-model:value="tagValue"
              :options="options"
              placeholder="设置图片的标签"
              style="width: 100%"
            />
          </div>
        </Col>
      </Row>
    </div>
    <template #footer>
      <div>
        <Button class="h-auto w-auto rounded-md px-6 py-2" @click="close">
          取消
        </Button>
        <Button
          class="h-auto w-auto rounded-md px-6 py-2"
          type="primary"
          @click="handleSubmit"
        >
          确认
        </Button>
      </div>
    </template>
  </Modal>
</template>

<style lang="scss" scoped>
:deep(.ant-select-selector) {
  border-color: #d8d8d8 !important;
  border-radius: 6px !important;
}
</style>
